深入浅出 react 事件代理

Copy 
1function App() {
2  const ele = useRef(null);
3  useEffect(()=>{
4    ele.current.addEventListener('click',(event)=>{ //DOM 方式
5      console.log('inside',event)
6    })
7  })
8  const handleClick = (event)=>{  //React 事件委托方式
9    console.log('inside',event)
10  }
11  const handleClick2 = ()=>{
12    console.log('ouside')
13  }
14  return (
15    <div className="App"
16      onClick={handleClick2}
17    >
18      <button onClick={handleClick}>normal</button>
19      <button ref={ele}>ref</button>
20    </div>
21  );
22}
23
24document.getElementById('root').addEventListener('click',(event)=>{
25    console.log('root====>',event)
26})
27ReactDOM.render(<App />, document.getElementById('root'));

Copy 
1//参数nativeEvent即为本地浏览器的原生事件
2//参数dispatchMarker标记事件源
3function SyntheticEvent(dispatchConfig, dispatchMarker, nativeEvent){
4    ...
5    var defaultPrevented = ...;
6    设置 this.isDefaultPrevented
7    设置 this.isPropagationStopped
8}
9assign(SyntheticEvent.prototype,{
10
11    //和原生浏览器事件一样的接口
12    preventDefault:...
13    stopPropagation:...
14
15    //React采用的是动态绑定，每个事件循环之后所有被dispatch的事件都会被释放回事件池内，事件是否应被释放由isPersistent决定
16    persist: ...
17    ...
18})

Copy 
1var ReactEventListener = {
2    ...
3    //两个主要接口，分别利用事件冒泡和事件捕获封装事件
4    trapBubbledEvent: function(){
5        return EventListener.listen(...);
6    },
7    trapCapturedEvent: function(){
8        return EventListener.capture(...);
9    }
10};

Copy 
1var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {
2  listenTo:function(){
3    //获得事件依赖
4    var dependencies =
5  EventPluginRegistry.registrationNameDependencies[registrationName];
6    var dependency = dependencies[i];
7    ...
8     for (var i = 0; i < dependencies.length; i++) {
9        ...
10        //根据事件类型进行封装
11        if (dependency === topLevelTypes.topWheel) {
12            ...
13        }else(dependency === topLevelTypes.topScroll){
14            ...
15        }...
16     }
17  }
18}

Copy 
1//储存event listeners
2var listenerBank = {};
3
4//已经有了dispatch对象集合(这里我翻译不出来，英文是dispatches，也就是事件将要被dispatch——我的理解是事件被派遣到的所有元素)的事件，存储到eventQueue中，等待被dispatch
5var eventQueue = null;
6
7var executeDispatchesAndRelease = function(){
8    ...
9    //dispatch事件
10    EventPluginUtils.executeDispatchesInOrder(event, executeDispatch);
11
12    //如果事件不是persistant，执行完后将其释放
13    if (!event.isPersistent()) {
14        event.constructor.release(event);
15    }
16};
17
18var EventPluginHub = {
19    ...
20
21    //为事件插件提供一个取出事件的借口接口
22    extractEvents: function(){
23    }
24}

Copy 
1class QrCode extends Component {
2  componentDidMount() {
3    document.body.addEventListener('click', e => {
4      this.setState({active: false});
5    });
6  }
7  componentWillUnmount() {
8  document.body.removeEventListener('click');
9  }
10  handleButton() {
11  this.setState({active: true});
12  }
13  handleQr(e) {
14  e.stopPropagation();
15  }
16  render() {
17  return (
18    <div>
19      <button onClick={this.handleButton.bind(this)}>点击二维码</button>
20      <div className="code" onClick={this.handleQr.bind(this)} style={{display: this.satate.active ? ' block': 'none'}}>
21        <image src="" alt='qr' />
22      </div>
23    </div>
24  )}
25}

Copy 
1componentDidMount() {
2  document.body.addEventListener('click', e => {
3      if(e..target && e.target.match('div.code')) {
4      return;
5    }
6    this.setState({active: false});
7  });
8}